import React, { FC } from 'react'
import { Button, Space, Tooltip } from 'antd'
import { 
    DeleteOutlined,
    EyeInvisibleOutlined,
    LockOutlined,
    CopyOutlined,
    BlockOutlined,
    UndoOutlined,
    RedoOutlined,
} from '@ant-design/icons'  
import { useDispatch } from 'react-redux'
import { 
    removeSelectedComponent,
    changeComponentHidden,
    toggleComponentLocked,
    copySelectedComponent,
    pasteCopiedComponent
} from '../../../store/componentsReducer/index.ts'
import { ActionCreators as UndoActionCreators } from 'redux-undo'
import useGetComponentInfo from '../../../hooks/useGetComponentinfo.ts'
// 在这个EditHeader 里面引入
const EditToolbar: FC = ()=>{
    const dispatch = useDispatch()
    const { selectedId,selectedComponent,copiedComponent } = useGetComponentInfo()
    const { isLocked } = selectedComponent || {}
    // 删除组件
    const handleDelete = ()=>{
        // 执行store里面的方法
        dispatch(removeSelectedComponent())
    }

    // 隐藏组件
    const handleHidden = ()=>{
        dispatch(changeComponentHidden({fe_id:selectedId,isHidden:true}))
    }

    // 锁定组件
    const handleLock = ()=>{
        dispatch(toggleComponentLocked({fe_id:selectedId}))
    }

    /*
    复制粘贴思路
        1、在Redux store中存贮复制的内容 copiedComponent
        2、粘贴按钮，判断是否 disabled
        3、和addComponent 代码重复,抽离代码
    */ 
    // 复制
    const copy = ()=>{
        dispatch(copySelectedComponent())
    }

    // 粘贴
    const paste = ()=>{
        // 粘贴事件
        dispatch(pasteCopiedComponent())
    }

    // 上移和下移的插件版本依赖不支持---暂时搁置

    // 撤销
    const undo = ()=>{
        dispatch(UndoActionCreators.undo())
    }
    // 重做
    const redo = ()=>{
        dispatch(UndoActionCreators.redo())
    }

    return (
        <Space>
            <Tooltip title="删除">
                <Button shape="circle" icon={<DeleteOutlined/>} onClick={()=>handleDelete()}></Button>
            </Tooltip>

            <Tooltip title="隐藏">
                <Button shape="circle" icon={<EyeInvisibleOutlined/>} onClick={handleHidden}></Button>
            </Tooltip>

            <Tooltip title="锁定">
                <Button shape="circle" icon={<LockOutlined/>} type={isLocked ? 'primary' : 'default'} onClick={handleLock}></Button>
            </Tooltip>

            <Tooltip title="复制">
                <Button shape="circle" icon={<CopyOutlined/>} onClick={copy}></Button>
            </Tooltip>

            <Tooltip title="粘贴">
                {/* 先要有复制才能粘贴，没有复制是不能粘贴的 */}
                <Button shape="circle" icon={<BlockOutlined/>} onClick={paste} disabled={copiedComponent == null}></Button>
            </Tooltip>

            <Tooltip title="撤销">
                {/* 先要有复制才能粘贴，没有复制是不能粘贴的 */}
                <Button shape="circle" icon={<UndoOutlined/>} onClick={undo}></Button>
            </Tooltip>

            <Tooltip title="重做">
                {/* 先要有复制才能粘贴，没有复制是不能粘贴的 */}
                <Button shape="circle" icon={<RedoOutlined/>} onClick={redo}></Button>
            </Tooltip>
        </Space>
    )
}

export default EditToolbar